{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Elasticsearch Test</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link href="https://elasticsearch.cn/static/css/default/img/favicon.ico?v=20151125" rel="shortcut icon" type="image/x-icon">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
</head>
<body onload="get_data('init','1')">
<!--导航-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <span class="navbar-brand">Elasticsearch 测试</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="mx-auto"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto" id="screen">
            <li class="nav-item active" id="9">
                <a class="nav-link">全部</a>
            </li>
            <li class="nav-item" id="0">
                <a class="nav-link">预告</a>
            </li>
            <li class="nav-item" id="1">
                <a class="nav-link">招标</a>
            </li>
            <li class="nav-item" id="2">
                <a class="nav-link">变更</a>
            </li>
            <li class="nav-item" id="3">
                <a class="nav-link">中标</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="输入关键词" aria-label="Search" id="search-input">
            <button id="searchbar" onclick="get_data('','1')" class="btn btn-outline-success my-2 my-sm-0" href="#">搜索
            </button>
        </form>
    </div>
</nav>
<div class="d-flex justify-content-around">
    <div class="mw-100" id="num"></div>
</div>
<!--列表-->
<ul class="list-group" id="list-group">
</ul>
<!--分页-->
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center" id="pages">
        <li class="page-item"><a class="page-link">上一页</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">下一页</a></li>
    </ul>
</nav>
<!--子页弹窗-->
<div class="modal fade modal-fullscreen" id="exampleModalScrollable" tabindex="-1"
     aria-labelledby="exampleModalScrollableTitle" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">

        <div class="container">
            <div class="modal-content">
                <div class="modal-header" id="modal-header">
                    <h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div id="table"></div>
                <div class="modal-body" id="new_con">
                </div>
                <div class="modal-footer">
                    <button class="btn"><a target="_blank" id="url">原网页</a></button>
                    <button type="button" class="btn" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $("#search-input").keypress(function (even) {
            if (even.which == 13) {
                get_data('', '1');
            }
        }
    );
    $('#screen li').on('click', function () {
        $(this).attr('class', 'nav-item active').siblings().attr('class', 'nav-item')
        get_data('', '1');
    });
    $(document).on('click', '#pages li', function () {
        let page = parseInt($("li[class='page-item active'] >a:eq(0)").text())
        if ($(this).text() === '上一页') {
            get_data('', page - 1)
        } else if ($(this).text() === '下一页') {
            get_data('', page + 1)
        }
    });
    $(document).on('click', '#list-group li a', function () {
        var id = $(this).attr('id')
        get_detail(id)
    });
</script>
<script>
    function get_data(init, page) {
        let keyword = $('#search-input').val();
        let type = $("li[class='nav-item active']").attr('id');
        $.ajax({
            url: 'index.html',
            type: 'POST',
            data: {'keyword': keyword, 'init': init, 'page': page, 'type': type,},
            success: function (data) {
                if (data.open) {
                    $('#num').html('共收集<b style="color: red">' + data.hits.total.value + '</b>条标讯')
                } else if (keyword === '') {

                    $('#num').html($("li[class='nav-item active']").text() + '：检索到<b style="color: red">' + data.hits.total.value + '</b>条结果')
                } else if (keyword !== '') {
                    $('#num').html($("li[class='nav-item active']").text() + '：通过关键词“' + keyword + '”检索到<b style="color: red">' + data.hits.total.value + '</b>条结果')
                }
                lis = '';
                $.each(data.hits.hits, function (index, item) {
                    var title = '';
                    var classification = item._source.classification;
                    if (data.open) {
                        if (item._source.title > 50) {
                            title = item._source.title.substring(0, 47) + '...'
                        } else {
                            title = item._source.title
                        }
                    } else {
                        if (item.hasOwnProperty('highlight')) {
                            if (item.highlight.hasOwnProperty('title')) {
                                title = item.highlight.title
                            } else {
                                title = item._source.title + "（<b style='color:red'>在正文中</b>）"
                            }
                            if (item.highlight.hasOwnProperty('classification')) {
                                classification = item.highlight.classification
                            } else {
                                classification = item._source.classification
                            }

                        } else {
                            title = item._source.title
                            classification = item._source.classification
                        }
                    }
                    li = '<li class="list-group-item"><span>【' + classification + '】</span><a type="button" data-toggle="modal" data-target="#exampleModalScrollable" href="#" id="' + item._id + '">' + title + '</a><span style="float:right">' + item._source.time + '</span></li>'
                    lis += li
                })
                $("ul[class='list-group']").html(lis)
                $("#pages").html(data['page_html'])

            }
        })
    }

    function get_detail(id) {
        let keyword = $('#search-input').val();
        $.ajax({
            url: 'index.html',
            type: 'POST',
            data: {'id': id, 'keyword': keyword},
            success: function (data) {
                $("#table").html('')
                $('#new_con').html(data.content.replace('<table', '<div class="table-responsive"><table class="table table-responsive table-bordered table-striped table-hover"').replace('</table>', '</table></div>'))
                $('#exampleModalScrollableTitle').html(data.title)
                $('#url').attr('href', data.link)
                if (data.hasOwnProperty('table')) {
                    $("#table").html(data.table)
                }
            }
        })
    }
</script>
</html>